$border-reset
  background-image: initial
  background-position: initial
  background-size: initial

bd($direction = a, $color = $colors.bd)
  .hairline &
    @extends $border-reset
  if $direction == t
    background-image: linear-gradient(180deg, $color 51%, transparent 51%)
    background-position: center top
    background-size: 100% .01rem
    .hairline &
      border-top: 0.5px solid $color
  else if $direction == b
    background-image: linear-gradient(0deg, $color 51%, transparent 51%)
    background-position: center bottom
    background-size: 100% .01rem
    .hairline &
      border-bottom: 0.5px solid $color
  else if $direction == l
    background-image: linear-gradient(90deg, $color 51%, transparent 51%)
    background-position: left center
    background-size: .01rem 100%
    .hairline &
      border-left: 0.5px solid $color
  else if $direction == r
    background-image: linear-gradient(270deg, $color 51%, transparent 51%)
    background-position: right center
    background-size: .01rem 100%
    .hairline &
      border-right: 0.5px solid $color
  else if $direction == v
    background-image: linear-gradient(180deg, $color 51%, transparent 51%), linear-gradient(0deg, $color 51%, transparent 51%)
    background-position: center top, center bottom
    background-size: 100% .01rem, 100% .01rem
    .hairline &
      border-top: 0.5px solid $color
      border-bottom: 0.5px solid $color
  else if $direction == h
    background-image: linear-gradient(90deg, $color 51%, transparent 51%), linear-gradient(270deg, $color 51%, transparent 51%)
    background-position: left center, right center
    background-size: .01rem 100%, .01rem 100%
    .hairline &
      border-left: 0.5px solid $color
      border-right: 0.5px solid $color
  else if $direction == a
    border: .01rem solid $color
    .hairline &
      border: 0.5px solid $color
      box-shadow: initial--